<script src="@/js/paipan/qimendunjia.js"></script>


<template>
  <div class="vue">

    <div class="region">
      <div class="header1">
        ༺༒༻ 奇门遁甲 ༺༒༻
      </div>
      <div class="header2">
        奇门遁甲是中国古代一门集预测学、决策学与军事战略于一体的神秘术数，被誉为“帝王之学”，其体系融合了天文、历法、数学、阴阳、五行、八卦、九宫等元素，
        <br />
        形成了一套复杂而精妙的时空模型，浓缩了华夏文明对宇宙规律的认知，其价值不仅在于预测功能，更在于承载的哲学智慧 ...
      </div>
    </div>

    <div class="data">

      <div
        class="nodata"
        v-show="!isData"
      >

        <video
          ref="videoRef"
          autoplay
          loop
          :muted="true"
        >
          <source
            src="@/assets/img/paipan/loading.mp4"
            type="video/mp4"
          >
        </video>

        <div class="option">

          <div class="title">
            ༺༒༻ 奇门遁甲 ༺༒༻
            <span class="type">
              <Tag color="success">
                卜
              </Tag>
            </span>
          </div>

          <div class="item">

            <div class="name">
              <input
                placeholder="请输入姓名"
                v-model="name"
                maxlength="10"
              />
            </div>

            <div class="occupy">
              <input
                placeholder="请输入占事"
                v-model="occupy"
                maxlength="10"
                @click="occupyPrompt"
              />
            </div>

            <div class="dateType">
              <el-radio-group
                v-model="dateType"
                v-for="item in dateTypeOptions"
                :key="item"
              >
                <el-radio-button
                  :label="item.label"
                  :value="item.value"
                />
              </el-radio-group>
            </div>

            <div class="sex">
              <el-radio-group
                v-model="sex"
                v-for="item in sexOptions"
                :key="item"
              >
                <el-radio-button
                  :label="item.label"
                  :value="item.value"
                />
              </el-radio-group>
            </div>

            <div class="date">
              <el-date-picker
                :clearable="false"
                v-model="date"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择日期"
                :editable="false"
                style="width:60%;"
                @change="getDateGanZhiMethod"
              />
              <el-radio-group
                class="leapMonth"
                v-model="leapMonthType"
                v-for="item in leapMonthTypeOptions"
                :key="item"
              >
                <el-radio-button
                  :label="item.label"
                  :value="item.value"
                />
              </el-radio-group>
            </div>

            <div class="other">
              <div class="title">
                岁数类型
              </div>
              <div class="kuang">
                <Select
                  v-model="xuShiSuiType"
                  class="select"
                >
                  <Option
                    v-for="item in xuShiSuiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="other">
              <div class="title">
                节气类型
              </div>
              <div class="kuang">
                <Select
                  v-model="jieQiType"
                  class="select"
                >
                  <Option
                    v-for="item in jieQiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="other">
              <div class="title">
                排盘类型
              </div>
              <div class="kuang">
                <Select
                  v-model="paiPanType"
                  class="select"
                >
                  <Option
                    v-for="item in paiPanTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="other">
              <div class="title">
                值使类型
              </div>
              <div class="kuang">
                <Select
                  v-model="zhiShiType"
                  class="select"
                >
                  <Option
                    v-for="item in zhiShiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div v-if="paiPanType === 1">
              <div class="other">
                <div class="title">
                  月家起局类型
                </div>
                <div class="kuang">
                  <Select
                    v-model="yueJiaQiJuType"
                    class="select"
                  >
                    <Option
                      v-for="item in yueJiaQiJuTypeOptions"
                      :key="item"
                      :label="item.label"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </div>
              </div>
            </div>

            <div class="other">
              <div class="title">
                年柱类型
              </div>
              <div class="kuang">
                <Select
                  v-model="yearGanZhiType"
                  class="select"
                >
                  <Option
                    v-for="item in yearGanZhiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="other">
              <div class="title">
                月柱类型
              </div>
              <div class="kuang">
                <Select
                  v-model="monthGanZhiType"
                  class="select"
                >
                  <Option
                    v-for="item in monthGanZhiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="other">
              <div class="title">
                日柱类型
              </div>
              <div class="kuang">
                <Select
                  v-model="dayGanZhiType"
                  class="select"
                >
                  <Option
                    v-for="item in dayGanZhiTypeOptions"
                    :key="item"
                    :label="item.label"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </Option>
                </Select>
              </div>
            </div>

            <div class="paipan">
              <Button
                type="primary"
                class="button"
                @click="paiPanMethod"
              >
                开始排盘
              </Button>
            </div>

          </div>

        </div>

      </div>

      <div
        class="yesdata"
        v-if="isData"
      >

        <div class="option">
          <Button
            type="primary"
            class="button"
            @click="fanHuiPaiPanMethod"
          >
            返回排盘
          </Button>
          <div class="float-right">
            <Button
              type="success"
              class="button2"
              @click="jiChuMethod"
            >
              <b v-if="dataPage === 1">
                <Icon type="md-pin" />
                基础信息
              </b>
              <span v-else>基础信息</span>
            </Button>
            <!-- <Button
              type="success"
              class="button2"
              @click="gengDuoMethod"
            >
              <b v-if="dataPage === 2">
                <Icon type="md-pin" />
                更多信息
              </b>
              <span v-else>更多信息</span>
            </Button> -->
          </div>
        </div>

        <div class="data">

          <div class="hrader">
            <div class="name">
              <Ellipsis
                :text="data.name"
                :length="3"
                tooltip
              />
            </div>
            <div class="date">
              <span class="other">（{{ data.sex + '、' + data.zao + '、' + data.age + '岁' }}）</span>
              <span class="item">公历{{ data.solarStr }}</span>
              <span class="item">农历{{ data.lunarStr }}</span>
              <span class="item">{{ data.xingQi }}</span>
              <span class="item">{{ data.jiJie }}</span>
              <span
                class="item"
                v-if="data.wuBuYuShi"
              >
                <Tag color="error">五不遇时</Tag>
              </span>
            </div>
            <div class="shengxiao">
              {{ data.shengXiao }}
            </div>
          </div>

          <div class="border">

            <!-- 基础信息 -->
            <div
              class="jichu"
              v-if="dataPage === 1"
            >

              <div class="go bgi1">
                <div class="item">
                  <div class="title">排盘方式</div>
                  <div class="content">
                    <span v-if="paiPanType === 0">
                      年家奇门（转盘拆补法）
                    </span>
                    <span v-if="paiPanType === 1">
                      月家奇门（转盘拆补法）
                    </span>
                    <span v-if="paiPanType === 2">
                      日家奇门（转盘拆补法）
                    </span>
                    <span v-if="paiPanType === 3">
                      时家奇门（转盘拆补法）
                    </span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">年命信息</div>
                  <div class="content">
                    <span v-if="data.yearGanZhiNaYin">
                      {{ data.yearGanZhiNaYin.substring(0, 2) }}<span v-html="wuXingGaoLiangMethod(data.yearGanZhiNaYin.substring(2, 3))"></span>命
                    </span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">生肖星座</div>
                  <div class="content">
                    {{ data.shengXiao + '、' + data.xingZuo }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">日主属性</div>
                  <div class="content">
                    <span v-html="ganZhiGaoLiangMethod(data.yearGan)"></span><span v-html="wuXingGaoLiangMethod(data.yearGanWuXing)"></span>
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">生辰八字</div>
                  <div class="content">
                    <span v-html="ganZhiGaoLiangMethod2(data.yearGanZhi)"></span>&nbsp;
                    <span v-html="ganZhiGaoLiangMethod2(data.monthGanZhi)"></span>&nbsp;
                    <span v-html="ganZhiGaoLiangMethod2(data.dayGanZhi)"></span>&nbsp;
                    <span v-html="ganZhiGaoLiangMethod2(data.hourGanZhi)"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字五行</div>
                  <div class="content">
                    <span v-html="wuXingGaoLiangMethod(data.yearGanZhiWuXing)"></span>&nbsp;
                    <span v-html="wuXingGaoLiangMethod(data.monthGanZhiWuXing)"></span>&nbsp;
                    <span v-html="wuXingGaoLiangMethod(data.dayGanZhiWuXing)"></span>&nbsp;
                    <span v-html="wuXingGaoLiangMethod(data.hourGanZhiWuXing)"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字空亡</div>
                  <div class="content">
                    <span
                      v-if="data.yearGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.yearGanZhiKongWang.substring(0, 1))"
                    ></span>
                    <span
                      v-if="data.yearGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.yearGanZhiKongWang.substring(1, 2))"
                    ></span>&nbsp;
                    <span
                      v-if="data.monthGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.monthGanZhiKongWang.substring(0, 1))"
                    ></span>
                    <span
                      v-if="data.monthGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.monthGanZhiKongWang.substring(1, 2))"
                    ></span>&nbsp;
                    <span
                      v-if="data.dayGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.dayGanZhiKongWang.substring(0, 1))"
                    ></span>
                    <span
                      v-if="data.dayGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.dayGanZhiKongWang.substring(1, 2))"
                    ></span>&nbsp;
                    <span
                      v-if="data.hourGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.hourGanZhiKongWang.substring(0, 1))"
                    ></span>
                    <span
                      v-if="data.hourGanZhiKongWang"
                      v-html="ganZhiGaoLiangMethod(data.hourGanZhiKongWang.substring(1, 2))"
                    ></span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字纳音</div>
                  <div class="content">
                    <span v-if="data.yearGanZhiNaYin">
                      {{ data.yearGanZhiNaYin }}
                    </span>&nbsp;
                    <span v-if="data.monthGanZhiNaYin">
                      {{ data.monthGanZhiNaYin }}
                    </span>&nbsp;
                    <span v-if="data.dayGanZhiNaYin">
                      {{ data.dayGanZhiNaYin }}
                    </span>&nbsp;
                    <span v-if="data.hourGanZhiNaYin">
                      {{ data.hourGanZhiNaYin }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="go bgi1">
                <div class="item">
                  <div class="title">
                    {{ data.prevJie }}日期
                  </div>
                  <div class="content">
                    {{ data.prevJieDateStr }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    {{ data.nextJie }}日期
                  </div>
                  <div class="content">
                    {{ data.nextJieDateStr }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    {{ data.prevQi }}日期
                  </div>
                  <div class="content">
                    {{ data.prevQiDateStr }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    {{ data.nextQi }}日期
                  </div>
                  <div class="content">
                    {{ data.nextQiDateStr }}
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">出生节</div>
                  <div class="content">
                    {{ data.chuShengJie }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">出生气</div>
                  <div class="content">
                    {{ data.chuShengQi}}
                  </div>
                </div>
              </div>

              <div class="go bgi1">
                <div class="item">
                  <div class="title">节气</div>
                  <div class="content">
                    {{ data.jieQi + data.sanYuan }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">局数</div>
                  <div class="content">
                    {{ data.yinYangDun + data.juShu }}局
                  </div>
                </div>
                <div class="item">
                  <div class="title">旬首</div>
                  <div class="content">
                    <span v-html="ganZhiGaoLiangMethod2(data.xunShou)"></span>（<span v-html="ganZhiGaoLiangMethod(data.xunShouYiZhang)"></span>）
                  </div>
                </div>
                <div class="item">
                  <div class="title">驿马</div>
                  <div class="content">
                    <span v-html="ganZhiGaoLiangMethod(data.yiMa)"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">值符</div>
                  <div class="content">
                    {{ data.zhiFu }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">值使</div>
                  <div class="content">
                    {{ data.zhiShi }}
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">天乙</div>
                  <div class="content">
                    {{ data.tianYi }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">地乙</div>
                  <div class="content">
                    {{ data.diYi }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">太乙</div>
                  <div class="content">
                    {{ data.taiYi }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">月相</div>
                  <div class="content">
                    {{ data.yueXiang }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">月将</div>
                  <div class="content">
                    <span v-html="ganZhiGaoLiangMethod(data.yueJiang)"></span>
                  </div>
                </div>
                <div class="item">
                  <div class="title mr-29">月将神</div>
                  <div class="content">
                    {{ data.yueJiangShen }}
                  </div>
                </div>
              </div>

              <div class="go bgi1">
                <div class="item">
                  <div class="title">伏吟</div>
                  <div class="content">
                    <span
                      v-if="data.fuYin.length === 0"
                      class="null"
                    >
                      无
                    </span>
                    <span v-else>
                      <Ellipsis
                        :text="data.fuYin.join('、')"
                        :length="29"
                        tooltip
                      />
                    </span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">反吟</div>
                  <div class="content">
                    <span
                      v-if="data.fanYin.length === 0"
                      class="null"
                    >
                      无
                    </span>
                    <span v-else>
                      <Ellipsis
                        :text="data.fanYin.join('、')"
                        :length="29"
                        tooltip
                      />
                    </span>
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">六仪击刑</div>
                  <div class="content">
                    <span
                      v-if="data.liuYiJiXing.length === 0"
                      class="null"
                    >
                      无
                    </span>
                    <span v-else>
                      <Ellipsis
                        :text="data.liuYiJiXing.join('、')"
                        :length="29"
                        tooltip
                      />
                    </span>
                  </div>
                </div>
                <div class="item">
                  <div class="title">奇仪入墓</div>
                  <div class="content">
                    <span
                      v-if="data.qiYiRuMu.length === 0"
                      class="null"
                    >
                      无
                    </span>
                    <span v-else>
                      <Ellipsis
                        :text="data.qiYiRuMu.join('、')"
                        :length="29"
                        tooltip
                      />
                    </span>
                  </div>
                </div>
              </div>

              <Row
                :gutter="10"
                class="row"
              >

                <Col span="12">
                <div class="gongwei">
                  <div class="waige">
                    <div
                      class="neige"
                      v-for="index in 9"
                      :key="index"
                      @click="gongMethod(houTianBaGuaGong[index - 1])"
                    >

                      <div>
                        <div class="yiKong">
                          <b
                            class="yiMa"
                            v-if="'' !== data.yiMaGongWeiMark[houTianBaGuaGong[index - 1] - 1]"
                          >
                            马
                          </b>
                          <b class="xunKong">
                            {{ data.liuJiaXunKongGongWeiMark[houTianBaGuaGong[index - 1] - 1] }}
                          </b>
                        </div>
                      </div>

                      <div>
                        <span
                          class="core"
                          v-if="index !== 5"
                        >
                          {{ data.shenPan[houTianBaGuaGong[index - 1] - 1].substring(1, 2) }}
                        </span>
                        <span
                          class="status"
                          v-if="index !== 5"
                        >
                          {{ data.baShenLuoGongStatus[houTianBaGuaGong[index - 1] - 1][1] }}
                        </span>
                      </div>

                      <div>
                        <div class="dun">
                          {{ data.jiuDun[houTianBaGuaGong[index - 1] - 1].join('') }}
                        </div>
                      </div>

                      <div>
                        <div
                          class="core"
                          v-if="index !== 5"
                        >
                          <span v-html="xingMuPoStatusMethod(data.tianPanQiYiTianQinYes[houTianBaGuaGong[index - 1] - 1], data.liuYiJiXingRuMuTianQinYesStatus[houTianBaGuaGong[index - 1] - 1])"></span>
                        </div>
                        <div
                          class="status"
                          v-if="index !== 5"
                        >
                          {{ data.tianPanQiYiLuoGongTianQinYesLink[houTianBaGuaGong[index - 1] - 1][0][1] }}
                        </div>
                        <div
                          class="status"
                          v-if="index !== 5"
                        >
                          <div v-if="data.tianPanQiYiLuoGongTianQinYesLink[houTianBaGuaGong[index - 1] - 1].length > 1">
                            {{ data.tianPanQiYiLuoGongTianQinYesLink[houTianBaGuaGong[index - 1] - 1][1][1] }}
                          </div>
                        </div>
                      </div>

                      <div>
                        <div class="core">
                          <span v-if="data.tianPan[houTianBaGuaGong[index - 1] - 1] !== '芮禽'">
                            <div>{{ data.tianPan[houTianBaGuaGong[index - 1] - 1].substring(1, 2) }}</div>
                          </span>
                          <span v-else>
                            <div>芮</div>
                          </span>
                          <span v-if="index === 5">
                            <div class="taji">☯</div>
                          </span>
                        </div>
                        <div class="status">
                          <span v-if="data.tianPan[houTianBaGuaGong[index - 1] - 1] !== '芮禽'">
                            {{ data.jiuXingLuoGongStatus[houTianBaGuaGong[index - 1] - 1][1] }}
                          </span>
                          <span
                            class="qin"
                            v-else
                          >禽</span>
                        </div>
                        <div
                          class="status"
                          v-if="data.tianPan[houTianBaGuaGong[index - 1] - 1] === '芮禽'"
                        >
                          {{ data.jiuXingLuoGongStatus[houTianBaGuaGong[index - 1] - 1][1].substring(0, 1) }}
                        </div>
                      </div>

                      <div>
                        <div
                          class="core"
                          v-if="index !== 5"
                        >
                          <span v-html="xingMuPoStatusMethod(data.tianPanQiYiTianQinNo[houTianBaGuaGong[index - 1] - 1], data.liuYiJiXingRuMuTianQinNoStatus[houTianBaGuaGong[index - 1] - 1])"></span>
                        </div>
                        <div
                          class="status"
                          v-if="index !== 5"
                        >
                          {{ data.tianPanQiYiLuoGongTianQinNoLink[houTianBaGuaGong[index - 1] - 1][0][1] }}
                        </div>
                        <div
                          class="status"
                          v-if="data.tianPanQiYiLuoGongTianQinNoLink[houTianBaGuaGong[index - 1] - 1].length > 1"
                        >
                          {{ data.tianPanQiYiLuoGongTianQinNoLink[houTianBaGuaGong[index - 1] -  1][1][1] }}
                        </div>
                      </div>

                      <div>
                        <div class="marki">
                          <div v-html="houTianBaGuaGongNameColorMethod(houTianBaGuaGongName[index - 1])"></div>
                          <div class="angan">
                            {{ data.anGan[houTianBaGuaGong[index - 1] - 1] }}
                          </div>
                        </div>
                      </div>

                      <div>
                        <div class="core">
                          <span v-html="xingMuPoStatusMethod(data.renPan[houTianBaGuaGong[index - 1] - 1].substring(0, 1), data.menPoStatus[houTianBaGuaGong[index - 1] - 1])"></span>
                        </div>
                        <div class="status">
                          {{ data.baMenLuoGongStatus[houTianBaGuaGong[index - 1] - 1][1] }}
                        </div>
                      </div>

                      <div>
                        <div class="core">
                          {{ data.diPan[houTianBaGuaGong[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{ data.diPanQiYiLuoGongLink[houTianBaGuaGong[index - 1] - 1][0][1] }}
                        </div>
                        <div
                          class="status"
                          v-if="data.diPanQiYiLuoGongLink[houTianBaGuaGong[index - 1] - 1].length > 1"
                        >
                          {{ data.diPanQiYiLuoGongLink[houTianBaGuaGong[index - 1] - 1][1][1] }}
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
                </Col>

                <Col span="12">
                <div class="qita">

                  <div class="item1">
                    <div class="title">
                      <b v-html="houTianBaGuaGongNameColorMethod(houTianBaGuaGongName2[luoGong - 1])"></b>
                      <b
                        v-if="data.neiWaiGongWeiMark[luoGong - 1] === '内'"
                        class="nei"
                      >
                        | {{ data.neiWaiGongWeiMark[luoGong - 1] }}盘
                      </b>
                      <b
                        v-if="data.neiWaiGongWeiMark[luoGong - 1] === '外'"
                        class="wai"
                      >
                        | {{ data.neiWaiGongWeiMark[luoGong - 1] }}盘
                      </b>

                      <div class="tip">
                        <Icon type="md-information-circle" />
                        点击九宫切换
                      </div>
                    </div>

                    <div class="divider">
                      <el-divider />
                    </div>

                    <div class="dangong">
                      <div class="small">
                        <div v-if="null !== data.yiMaGongWeiMark">
                          <div class="yiKong">
                            <b
                              class="yiMa"
                              v-if="'' !== data.yiMaGongWeiMark[luoGong - 1]"
                            >
                              马
                            </b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongWeiMark[luoGong - 1] }}</b>
                          </div>
                        </div>
                        <div v-else></div>
                        <div>{{ data.shenPan[luoGong - 1] }}</div>
                        <div>
                          <div class="dun">
                            {{ data.jiuDun[luoGong - 1].join('') }}
                          </div>
                        </div>
                        <div>{{ data.tianPanQiYiTianQinYes[luoGong - 1] }}</div>
                        <div>{{ data.tianPan[luoGong - 1] }}</div>
                        <div v-if="luoGong !== 5">{{ data.tianPanQiYiTianQinNo[luoGong - 1] }}</div>
                        <div v-else></div>
                        <div></div>
                        <div>{{ data.renPan[luoGong - 1] }}</div>
                        <div>{{ data.diPan[luoGong - 1] }}</div>
                      </div>
                      <div class="title1">
                        <span v-html="houTianBaGuaGongNameColorMethod(houTianBaGuaGongName2[luoGong - 1])"></span>
                      </div>
                    </div>

                    <div
                      class="yueling"
                      v-if="luoGong !== 5"
                    >
                      <div class="small">
                        <div v-if="null !== data.baGuaWangShuai[luoGong - 1]">
                          {{ data.baGuaWangShuai[luoGong - 1][0] + '：' + data.baGuaWangShuai[luoGong - 1][1] }}
                        </div>
                        <div v-if="null !== data.jiuXingWangShuai[luoGong - 1]">
                          {{ data.jiuXingWangShuai[luoGong - 1][0] + '：' + data.jiuXingWangShuai[luoGong - 1][1] }}
                        </div>
                        <div v-if="null !== data.baMenWangShuai[luoGong - 1]">
                          {{ data.baMenWangShuai[luoGong - 1][0] + '：' + data.baMenWangShuai[luoGong - 1][1] }}
                        </div>
                      </div>
                      <div class="title1">月令：{{ data.monthZhi }}</div>
                    </div>

                    <div
                      class="dangong"
                      v-if="jiuGongDiZhi[luoGong - 1].length !== 0"
                    >
                      <div class="small">
                        <div v-if="null !== data.yiMaGongWeiMark[luoGong - 1]">
                          <div class="yiKong">
                            <b
                              class="yiMa"
                              v-if="'' !== data.yiMaGongWeiMark[luoGong - 1]"
                            >
                              马
                            </b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongWeiMark[luoGong - 1] }}</b>
                          </div>
                        </div>
                        <div v-else></div>
                        <div>{{ data.baShenLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>
                          <div class="dun">
                            <span
                              v-for="index in data.jiuDun[luoGong - 1].length"
                              :key="index"
                            >
                              {{ data.jiuDun[luoGong - 1][index - 1] }}
                            </span>
                          </div>
                        </div>
                        <div v-if="undefined !== data.tianPanQiYiLuoGongTianQinYesLink[luoGong - 1][0]">
                          {{ data.tianPanQiYiLuoGongTianQinYesLink[luoGong - 1][0][1] }}
                        </div>
                        <div v-else></div>
                        <div>{{ data.jiuXingLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>{{ data.tianPanQiYiLuoGongTianQinNoLink[luoGong - 1][0][1] }}</div>
                        <div></div>
                        <div>{{ data.baMenLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>{{ data.diPanQiYiLuoGongLink[luoGong - 1][0][1] }}</div>
                      </div>
                      <div class="title1">地支：{{ jiuGongDiZhi[luoGong - 1][0] }}</div>
                    </div>

                    <div
                      class="dangong"
                      v-if="jiuGongDiZhi[luoGong - 1].length > 1"
                    >
                      <div class="small">
                        <div v-if="null != data.yiMaGongWeiMark[luoGong - 1]">
                          <div class="yiKong">
                            <b
                              class="yiMa"
                              v-if="'' !== data.yiMaGongWeiMark[luoGong - 1]"
                            >
                              马
                            </b>
                            <b class="xunKong">{{ data.liuJiaXunKongGongWeiMark[luoGong - 1] }}</b>
                          </div>
                        </div>
                        <div v-else></div>
                        <div>{{ data.baShenLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>
                          <div class="dun">
                            <span
                              v-for="index in data.jiuDun[luoGong - 1].length"
                              :key="index"
                            >
                              {{ data.jiuDun[luoGong - 1][index - 1] }}
                            </span>
                          </div>
                        </div>
                        <div v-if="undefined !== data.tianPanQiYiLuoGongTianQinYesLink[luoGong - 1][0]">
                          {{ data.tianPanQiYiLuoGongTianQinYesLink[luoGong - 1][0][1] }}
                        </div>
                        <div v-else></div>
                        <div>{{ data.jiuXingLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>{{ data.tianPanQiYiLuoGongTianQinNoLink[luoGong - 1][1][1] }}</div>
                        <div></div>
                        <div>{{ data.baMenLuoGongStatus[luoGong - 1][1] }}</div>
                        <div>{{ data.diPanQiYiLuoGongLink[luoGong - 1][1][1] }}</div>
                      </div>
                      <div class="title1">地支：{{ jiuGongDiZhi[luoGong - 1][1] }}</div>
                    </div>
                  </div>

                  <div class="keying">
                    <el-tabs
                      v-model="keyingTab"
                      stretch="true"
                    >

                      <el-tab-pane
                        label="十干克应"
                        name="1"
                      >
                        <div v-if="data.shiGanKeYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.shiGanKeYing[luoGong - 1].length"
                            :key="index"
                          >
                            <Tag
                              size="medium"
                              class="tag"
                            >
                              <b>{{ data.shiGanKeYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                            </Tag>
                            <span class="item">
                              {{ data.shiGanKeYing[luoGong - 1][index - 1].split('→')[1] }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null"
                        >暂无数据</div>
                      </el-tab-pane>

                      <el-tab-pane
                        label="八门克应"
                        name="2"
                      >
                        <div v-if="data.baMenKeYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.baMenKeYing[luoGong - 1].length"
                            :key="index"
                          >
                            <span v-if="'' !== data.baMenKeYing[luoGong - 1][index - 1]">
                              <Tag
                                size="medium"
                                class="tag"
                              >
                                <b>{{ data.baMenKeYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                              </Tag>
                              <span class="item">
                                {{ data.baMenKeYing[luoGong - 1][index - 1].split('→')[1] }}
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null"
                        >暂无数据</div>
                      </el-tab-pane>

                      <el-tab-pane
                        label="八门静应"
                        name="3"
                      >
                        <div v-if="data.baMenJingYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.baMenJingYing[luoGong - 1].length"
                            :key="index"
                          >
                            <Tag
                              size="medium"
                              class="tag"
                            >
                              <b>{{ data.baMenJingYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                            </Tag>
                            <span class="item">
                              {{ data.baMenJingYing[luoGong - 1][index - 1].split('→')[1] }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null"
                        >暂无数据</div>
                      </el-tab-pane>

                      <el-tab-pane
                        label="八门动应"
                        name="4"
                      >
                        <div v-if="data.baMenDongYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.baMenDongYing[luoGong - 1].length"
                            :key="index"
                          >
                            <Tag
                              size="medium"
                              class="tag"
                            >
                              <b>{{ data.baMenDongYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                            </Tag>
                            <span class="item">
                              {{ data.baMenDongYing[luoGong - 1][index - 1].split('→')[1] }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null"
                        >暂无数据</div>
                      </el-tab-pane>

                      <el-tab-pane
                        label="星门克应"
                        name="5"
                      >
                        <div v-if="data.xingMenKeYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.xingMenKeYing[luoGong - 1].length"
                            :key="index"
                          >
                            <Tag
                              size="medium"
                              class="tag"
                            >
                              <b>{{ data.xingMenKeYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                            </Tag>
                            <span class="item">
                              {{ data.xingMenKeYing[luoGong - 1][index - 1].split('→')[1] }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null"
                        >暂无数据</div>
                      </el-tab-pane>

                      <el-tab-pane
                        label="九星时应"
                        name="6"
                      >
                        <div v-if="data.jiuXingShiYing[luoGong - 1][0] !== ''">
                          <div
                            v-for="index in data.jiuXingShiYing[luoGong - 1].length"
                            :key="index"
                          >
                            <Tag
                              size="medium"
                              class="tag"
                            >
                              <b>{{ data.jiuXingShiYing[luoGong - 1][index - 1].split('→')[0] }}</b>
                            </Tag>
                            <span class="item">
                              {{ data.jiuXingShiYing[luoGong - 1][index - 1].split('→')[1] }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-else
                          class="null "
                        >暂无数据</div>
                      </el-tab-pane>

                    </el-tabs>
                  </div>

                </div>
                </Col>

              </Row>

            </div>

            <!-- 更多信息 -->
            <div
              class="gengduo"
              v-if="dataPage === 2"
            >

              敬请期待...

            </div>

          </div>

        </div>
      </div>

    </div>

  </div>
</template>


<style scoped lang="scss" src="@/css/paipan/qimendunjia.scss"></style>
